<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>HTML5语义化标签示例</title>
  <style>
    header,
    nav,
    main,
    article,
    section,
    aside,
    footer {
      border: 1px solid #ccc;
      margin: 10px;
      padding: 15px;
    }
    nav ul {
      list-style: none;
      padding: 0;
    }
    nav li {
      display: inline;
      margin-right: 20px;
    }
  </style>
</head>
<body>
  <!-- 页眉：通常放网站 Logo、主标题、主导航或搜索框，一个页面可出现多次，但顶级 header 代表整个站点头部 -->
  <header>
    <h1>网站名称或Logo</h1>
    <p>网站副标题或简介</p>
  </header>

  <!-- 导航：包裹站内主要链接列表，屏幕阅读器可快速跳转；一个页面允许存在多个 nav，但主导航建议只有一个 -->
  <nav>
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#news">文章</a></li>
      <li><a href="#about">关于我们</a></li>
    </ul>
  </nav>

  <!-- 主体内容：一个页面仅有一个 main，聚合与文档中心主题直接相关的内容，辅助技术可一键跳过其他区块 -->
  <main>
    <!-- 独立文章：可脱离上下文单独分发，内部自带 header/footer；适合博客、新闻、论坛帖子等 -->
    <article>
      <!-- 文章头部：放标题、作者、发布时间、分类等元信息 -->
      <header>
        <h2>一篇关于语义化标签的文章</h2>
        <!-- time 元素附带机器可读格式 datetime，利于 SEO 与浏览器日历解析 -->
        <p>发布日期: <time datetime="2025-09-27">2025年9月27日</time></p>
      </header>

      <!-- 章节区块：把长文按逻辑拆段，每段可有自己的标题；section 不是普通 div，必须有标题或提纲 -->
      <section>
        <h3>什么是语义化标签？</h3>
        <p>语义化标签是指...</p>
        <!-- figure 包裹图表/代码/媒体及其说明；figcaption 提供图注，可被屏幕阅读器关联朗读 -->
        <figure>
          <img src="./HTML5语义化结构图.png" alt="HTML5语义化结构图解" width="500"/>
          <figcaption>图1: HTML5文档结构示例</figcaption>
        </figure>
      </section>
      
      <section>
        <h3>为什么使用语义化标签？</h3>
        <p>使用它们的好处是...</p>
      </section>

      <!-- 文章尾部：放标签、分享、版权声明、上下篇链接等 -->
      <footer>
        <p>文章标签: <mark>HTML5</mark>, <mark>Semantic Web</mark></p>
      </footer>
    </article>
  </main>

  <!-- 侧边栏：存放与主内容松散相关但又属于补充性质的内容（广告、相关链接、目录、引语等） -->
  <aside>
    <h3>相关推荐</h3>
    <ul>
      <li><a href="#">链接一</a></li>
      <li><a href="#">链接二</a></li>
    </ul>
  </aside>

  <!-- 页面级页脚：通常放版权、备案、联系方式、站点地图、返回顶部等；address 元素专用于提供作者或组织的联系信息 -->
  <footer>
    <p>© 2025 XX网站. 保留所有权利.</p>
    <address>
      联系我们: <a href="mailto:contact@example.com">contact@example.com</a>
    </address>
  </footer>
</body>
</html>
